<template>
  <div class="wallet-container">
    <!-- 顶部用户信息区域 -->
    <div class="user-info">
      <div class="avatar">
        <img src="../../assets/avatar.svg" alt="用户头像" class="avatar-img">
      </div>
    </div>

    <!-- 账户余额信息 -->
    <div class="balance-info">
      <div class="balance-item">
        <div class="balance-label">提现处理中金额(元)</div>
        <div class="balance-value processing">{{ accountData.processingAmount }}</div>
      </div>
      <div class="balance-item">
        <div class="balance-label">可提现金额(元)</div>
        <div class="balance-value available">{{ accountData.availableAmount }}</div>
      </div>
    </div>

    <!-- 提现按钮 -->
    <div class="withdraw-btn-container">
      <button class="withdraw-btn" @click="showWithdrawDialog">提 现</button>
    </div>

    <!-- 提现对话框 -->
    <el-dialog
      v-model="withdrawDialogVisible"
      title="提现"
      width="90%"
      center
      :show-close="false"
      class="withdraw-dialog"
    >
      <div class="withdraw-form">
        <div class="withdraw-code-input">
          <el-input 
            v-model="withdrawCode" 
            placeholder="输入提现码"
            clearable
          ></el-input>
        </div>
        <div class="withdraw-actions">
          <button class="confirm-btn" @click="confirmWithdraw" :disabled="!withdrawCode">提现</button>
          <button class="cancel-btn" @click="cancelWithdraw">取消</button>
        </div>
        <div class="withdraw-status" v-if="withdrawStatus">
          <div class="status-success" v-if="withdrawStatus === 'success'">
            订单状态:打款成功
          </div>
          <div class="status-message">
            温馨提示:您的个人信用贷款放款成功，请留意您的个人账户!
          </div>
        </div>
        <div class="security-info">
          <el-icon><Lock /></el-icon>
          <span>账户资金安全由银行保障</span>
        </div>
      </div>
    </el-dialog>

    <!-- 底部导航栏 -->
    <bottom-nav-bar />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { Lock } from '@element-plus/icons-vue';
import BottomNavBar from '../../components/BottomNavBar.vue';
import { useUserStore } from 'store';

// 用户状态
const userStore = useUserStore();

// 账户余额数据
const accountData = reactive({
  processingAmount: '0.00',
  availableAmount: '50000'
});

// 提现对话框显示状态
const withdrawDialogVisible = ref(false);
// 提现码
const withdrawCode = ref('');
// 提现状态
const withdrawStatus = ref('');
// 提现处理中
const withdrawProcessing = ref(false);

// 显示提现对话框
const showWithdrawDialog = () => {
  // 检查用户是否登录
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录');
    return;
  }
  
  withdrawDialogVisible.value = true;
  withdrawStatus.value = '';
  withdrawCode.value = '';
};

// 确认提现
const confirmWithdraw = () => {
  if (!withdrawCode.value) {
    ElMessage.warning('请输入提现码');
    return;
  }
  
  withdrawProcessing.value = true;
  
  // 模拟提现处理
  const loading = ElLoading.service({
    lock: true,
    text: '提现处理中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  
  // 模拟API请求
  setTimeout(() => {
    loading.close();
    withdrawProcessing.value = false;
    withdrawStatus.value = 'success';
    
    // 更新账户余额
    accountData.processingAmount = accountData.availableAmount;
    accountData.availableAmount = '0.00';
    
    ElMessage.success('提现申请已提交');
  }, 1500);
};

// 取消提现
const cancelWithdraw = () => {
  if (withdrawProcessing.value) {
    ElMessage.warning('提现处理中，请稍候...');
    return;
  }
  
  withdrawDialogVisible.value = false;
};
</script>

<style scoped lang="scss">
.wallet-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 60px; // 为底部导航留出空间
}

// 用户信息区域
.user-info {
  background-color: #fff;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #f0f0f0;
    
    .avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

// 账户余额信息
.balance-info {
  background-color: #fff;
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  
  .balance-item {
    flex: 1;
    padding: 15px;
    text-align: center;
    
    &:first-child {
      border-right: 1px solid #f0f0f0;
    }
    
    .balance-label {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .balance-value {
      font-size: 18px;
      font-weight: bold;
      
      &.processing {
        color: #ff9800;
      }
      
      &.available {
        color: #f56c6c;
      }
    }
  }
}

// 提现按钮
.withdraw-btn-container {
  padding: 20px;
  background-color: #f5f7fa;
  
  .withdraw-btn {
    width: 100%;
    height: 44px;
    background-color: #fff;
    color: #333;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    
    &:active {
      background-color: #f5f7fa;
    }
  }
}

// 提现对话框
.withdraw-dialog {
  :deep(.el-dialog__header) {
    padding: 15px;
    margin-right: 0;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
  }
  
  :deep(.el-dialog__body) {
    padding: 20px;
  }
  
  .withdraw-form {
    .withdraw-code-input {
      margin-bottom: 20px;
    }
    
    .withdraw-actions {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      
      .confirm-btn, .cancel-btn {
        flex: 1;
        height: 40px;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
      }
      
      .confirm-btn {
        background-color: #3a4a6d;
        color: #fff;
        border: none;
        
        &:disabled {
          opacity: 0.7;
          cursor: not-allowed;
        }
      }
      
      .cancel-btn {
        background-color: #f5f5f5;
        color: #666;
        border: 1px solid #dcdfe6;
      }
    }
    
    .withdraw-status {
      margin-bottom: 20px;
      padding: 15px;
      background-color: #f8f8f8;
      border-radius: 4px;
      
      .status-success {
        color: #67c23a;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .status-message {
        color: #666;
        font-size: 14px;
        line-height: 1.5;
      }
    }
    
    .security-info {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 12px;
      
      .el-icon {
        margin-right: 5px;
        color: #67c23a;
      }
    }
  }
}
</style>